<template>
    <div class="menu-bar">
        <div class="menus border-bottom-1px">
            <div @click="turn(item.id)" class="menu" v-for="item in list" :key="item.id">
                <img class="img"  :src="imgH+item.img" alt="">
                <span class="name">{{item.name}}</span>
            </div>
        </div>
<!--        <div class="notice">-->
<!--            <div class="left ">-->
<!--                <span class="iconfont icontoutiao"></span>-->
<!--                <span class="title">头条</span>-->
<!--            </div>-->
<!--            <div class="right">-->
<!--                <span class="msg">新版本商城已经上线啦,快来体验吧!</span>-->
<!--            </div>-->
<!--        </div>-->
    </div>
</template>

<script>
    import * as Dialog from '@/dialog'
    import {listType} from "../../api/goods";

    export default {
        props:{
          list:Array,
          id:Number
        },
        created() {
            // listType().then(res => {
            //     this.typeList = res.data
            // })
        },
        methods: {
            turn(path) {
               this.$router.push({
                   path:`/goodslist?type=${this.id}&saletype=${path}`
               })
            }
        },
        computed: {
            imgH() {
                return process.env.VUE_APP_IMG_DOMAIN
            },
            menus() {
                return this.typeList.filter((type, index) => {
                    return index < 5
                })
            }
        },
        data() {
            return {
                typeList: [
                    {
                        name:'签到有礼',
                        img:require('./qd.png'),
                        path:'/point/sign'
                    },
                    {
                        name:'分享有利',
                        img:require('./fxyl.png'),
                        path:''
                    },
                    {
                        name:'新人专享',
                        img:require('./xrzx.png'),
                        path:''
                    },
                    {
                        name:'代理专享',
                        img:require('./dlzx.png'),
                        path:''
                    },
                    {
                        name:'团购好礼',
                        img:require('./tghl.png'),
                        path:''
                    },
                    {
                        name:'门店采购',
                        img:require('./mdcg.png'),
                        path:''
                    },
                    {
                        name:'智慧门店',
                        img:require('./zhmd.png'),
                        path:''
                    },
                    {
                        name:'明星爆款',
                        img:require('./mxbk.png'),
                        path:''
                    },
                    {
                        name:'网红爆款',
                        img:require('./whbk.png'),
                        path:''
                    },
                    {
                        name:'聚优惠',
                        img:require('./qyh.png'),
                        path:''
                    },
                    {
                        name:'京东',
                        img:require('./jd.png'),
                        path:''
                    },
                    {
                        name:'拼多多',
                        img:require('./pdd.png'),
                        path:''
                    },
                    {
                        name:'唯品会',
                        img:require('./wph.png'),
                        path:''
                    },
                    {
                        name:'公益助农',
                        img:require('./gyzn.png'),
                        path:''
                    },
                    {
                        name:'公益爱心',
                        img:require('./gyax.png'),
                        path:''
                    }

                ]
            }
        }
    }
</script>

<style scoped lang="stylus">
    .menu-bar
        /*background-color $item-bg*/
        border-radius 5px
        overflow hidden

        .menus
            border-bottom-color $border-split-color
            display flex
            flex-wrap wrap
            .menu
                padding 13.5px 0 9.5px
                flex 0 0 20%
                display flex
                align-items center
                justify-content center
                flex-direction column

                .img
                    width  1.20rem
                    height  1.20rem

                .name
                    color $font-color-deep
                    font-size: 12px;
                    line-height 12px
                    margin-top 6px

        .notice
            padding 6.5px 0
            display flex
            align-items center

            .left
                flex 0 0 80px
                display flex
                align-items center
                border-right 1Px solid $font-color-light
                margin-right 13.5px

                .iconfont
                    margin-left 23px
                    width 16px
                    height 16px
                    color #f0c808

                .title
                    font-size 14px
                    color: rgba(240, 200, 8, 1);
                    font-weight: 500;
                    margin-left 5px

            .right
                flex 1
                display flex
                align-items center
                padding-right 85px
                overflow hidden
                height 100%

                .msg
                    overflow hidden
                    white-space nowrap
                    text-overflow ellipsis
                    color $font-color-light
                    font-size 11px
                    font-weight 300
                    line-height 12px


</style>